import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Link, routerRedux } from 'dva/router';

import { Card, Form, Button, Spin } from 'antd';

import AssetTable from '../../components/AssetTable';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';

import styles from './index.less';

const getValue = obj => Object.keys(obj).map(key => obj[key]).join(',');

@connect(state => ({
  ...state.assetList,
}))
@Form.create()
export default class AssetTypeList extends PureComponent {
  state = {
    curPage: 1,
    selectedRows: [],
    formValues: {},
  };

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'assetList/fetchList',
      payload: {
        page: this.state.curPage,
      },
    });
  }

  handleAttributeTableChange = (pagination, filtersArg, sorter) => {
    const { formValues } = this.state;

    const filters = Object.keys(filtersArg).reduce((obj, key) => {
      const newObj = { ...obj };
      newObj[key] = getValue(filtersArg[key]);
      return newObj;
    }, {});

    const params = {
      currentPage: pagination.current,
      pageSize: pagination.pageSize,
      ...formValues,
      ...filters,
    };

    if (sorter.field) {
      params.sorter = `${sorter.field}_${sorter.order}`;
    }
  }

  handleMenuClick = (e) => {
    const { dispatch } = this.props;
    const { selectedRows } = this.state;

    if (!selectedRows) return;

    switch (e.key) {
      case 'remove':
        dispatch({
          type: 'rule/remove',
          payload: {
            no: selectedRows.map(row => row.no).join(','),
          },
          callback: () => {
            this.setState({
              selectedRows: [],
            });
          },
        });
        break;
      default:
        break;
    }
  }

  handleSelectRows = (rows) => {
    this.setState({
      selectedRows: rows,
    });
  }

  handleShowDetail = (asset) => {
    const { dispatch } = this.props;
    dispatch(routerRedux.push(`/asset/detail/${asset.id}`));
  }

  render() {
    const { loading, data } = this.props;
    const { selectedRows } = this.state;

    const renderData = {
      list: data,
      pagination: undefined,
    };

    return (
      <PageHeaderLayout title="所有资产">
        <Card bordered={false}>
          <div className={styles.tableList}>
            <div className={styles.tableListOperator}>
              <Link to="/asset/add">
                <Button icon="plus" type="primary">
                  新建
                </Button>
              </Link>
            </div>
            {data ? (
              <AssetTable
                selectedRows={selectedRows}
                loading={loading}
                data={renderData}
                onSelectRow={this.handleSelectRows}
                onChange={this.handleAttributeTableChange}
                onShowDetail={this.handleShowDetail}
              />
            ) : (
              <Spin />
            )}
          </div>
        </Card>
      </PageHeaderLayout>
    );
  }
}

